﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    @* 设置背景颜色为灰色 *@
    <div class="layui-bg-gray" style="padding:16px 100px 16px 100px;">
        @* layui-panel 创建一个面板样式的容器 *@
        <div class="layui-panel" style="width:100%;">
            @* layui-card 创建一个卡片样式的容器*@
            @* 你可以根据需要调整这里的宽度和高度 *@
            <div class="layui-card">
                @* 标题 *@
                <div class="layui-card-header">
                    <h3 style="color: #34c38f">
                        <i class="layui-icon layui-icon-left" style="color: #dcccc0"></i><a style="color: #e2e2e2;cursor:pointer" href="/Process/ProcessRouteInfo"> 返回&nbsp;&nbsp;</a><span style="color: #000">|</span>&nbsp;&nbsp;工艺路线&nbsp;<span style="color: #000">(状态码)</span>
                    </h3>
                    @* 墨绿分割线 *@
                    <hr class="layui-border-green">
                </div>
                @* 主体 *@
                <div class="layui-card-body">
                    <div style="margin-top:20px;">
                    <form class="layui-form layui-row layui-col-space16" lay-filter="demo-val-filter" action="">
                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">工艺编码</label>
                                <div class="layui-input-block">
                                    <input type="text" name="processRouteNo" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">工艺名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="processRouteName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">工艺版本</label>
                                <div class="layui-input-block">
                                    <input type="text" name="processVersion" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">工艺描述</label>
                                <div class="layui-input-block">
                                    <input type="text" name="processDesc" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">物料</label>
                                <div class="layui-input-block">
                                    <select id="mySelect" name="materialId" lay-filter="demoselect">
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">物料规格</label>
                                <div class="layui-input-block">
                                    <input type="text" id="node" autocomplete="off" class="layui-input" disabled>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="margin-bottom: 10px;">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-block">
                                    <select name="processStatus">
                                        <option value="0">请选择</option>
                                        <option value="1">有效</option>
                                        <option value="2">无效</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md5">
                            <div class="layui-form-item" style="float:right;margin-top: 60px;">
                                <div class="layui-input-block">
                                    <button type="submit" id="component" class="layui-btn layui-icon layui-icon-add-1" lay-submit lay-filter="demo-val">保存</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>

        @* 工序行 *@
        <div class="layui-panel" style="width:100%;">
            <div class="layui-card">
                @* 标题 *@
                <div class="layui-card-header">
                    <h3 style="color: #34c38f">
                        <span style="color:#1e9fff;">工序行</span>
                    </h3>
                    @* 蓝色分割线 *@
                    <hr class="layui-border-blue">
                </div>
                @* 主体 *@
                <div class="layui-card-body">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">行信息</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div style="margin-top:10px;">
                                @* 弹出框 *@
                                <button type="button" style="float:right;font-weight:bold;" class="layui-btn layui-bg-blue layui-icon layui-icon-addition" id="openLayerBtn">新增工序</button>
                            </div>
                            @* 表格 *@
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>顺序</th>
                                        <th>工序编码</th>
                                        <th>工序名称</th>
                                        <th>工作中心</th>
                                        <th>前置期</th>
                                        <th>工价(元)</th>
                                        <th>废扣工价(元)</th>
                                        <th>创建时间</th>
                                        <th>创建人</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div id="demo-laypage-all"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        // 使用layui的layer模块
        layui.use(['form', 'layer'], function () {
            var $ = layui.$;
            var form = layui.form;
            var table = layui.table;
            var laypage = layui.laypage;

            //获取分页数据
            var pageIndex = 1;
            var pageSize = 3;

            //创建数据获取工艺编号
            var Number = '';

            // $(function () {
            //     if (Number != '') {
            //         SearchProcessLineOperation(pageIndex, pageSize)
            //     }
            // })

            $.ajax({
                url: '@ViewBag.RedDragonWrite' + "/api/Process/SearchLogistics",
                type: 'GET',

                dataType: 'json',
                success: res => {
                    console.log(res)
                    var options = '<option value="0">请选择</option>';
                    $.each(res.data, function (index, item) {
                        options += '<option value="' + item.materialId + '">' + item.materialName + '</option>';
                    });
                    $('#mySelect').html(options);
                    form.render('select'); // 更新下拉框渲染
                }
            });

            //下拉框获取值
            form.on('select(demoselect)', function (data) {
                Mid = data.value;
                console.log(Mid)
                MaterialSpec()
            });

            function MaterialSpec() {
                var Mid = $('#mySelect').val();
                console.log(Mid)
                var obj = {
                    MaterialId: Mid
                }
                $.ajax({
                    url: '@ViewBag.RedDragonWrite' + "/api/Process/SearchCondition",
                    type: 'GET',
                    data: obj,
                    async: false,
                    dataType: 'json',
                    success: res => {
                        console.log(res)
                        $('#node').val(res.data.specifications);
                    }
                });
            }

            // 表单取值
            layui.$('#component').on('click', function () {
                var data = form.val('demo-val-filter');
            });

            // 提交事件
            form.on('submit(demo-val)', function (data) {
                var field = data.field; // 获取表单字段值
                field.createdOwner = localStorage.getItem('userName');
                Number = field.processRouteNo;
                field.auditStatus = 1;
                console.log(field) //在控制台显示值
                // 此处可执行 Ajax 等操作
                $.ajax({
                    type: "post",
                    url: '@ViewBag.RedDragonWrite' + "/api/Process/CreateProcessRoute",
                    data: JSON.stringify(field),
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        // 处理响应，例如提示成功信息
                        layui.layer.msg(res.msg, { icon: 6, time: 1000 });
                    },
                    error: function (xhr, status, error) {
                        // 处理错误
                        layui.layer.msg('添加失败', { icon: 5, time: 1000 });
                    }
                })
                return false; // 阻止默认 form 跳转
            });

            // 绑定按钮点击事件 进行跳转页面
            $('#openLayerBtn').on('click', function () {
                layer.open({
                    type: 2,
                    title: '工序行编辑',
                    area: ['550px', '500px'],
                    content: '/Process/CreateProcessLineOperation?Number=' + Number,
                    end: function () { // 弹出层关闭后执行的回调
                        SearchProcessLineOperation(pageIndex, pageSize) // 调用工序行显示
                    },
                });
            });



            //获取工艺路线列表
            function SearchProcessLineOperation(index, size) {
                //获取数据
                var data = {
                    processRouteNo: Number,
                    pageIndex: index,
                    pageSize: size,
                }
                console.log(data);
                var totalCount = 0;//总条数
                var totalPage = 0;//总页数
                //获取
                $.ajax({
                    url: '@ViewBag.RedDragonWrite' + "/api/Process/SearchOperation",
                    type: 'post',
                    data: JSON.stringify(data),
                    dataType: 'json',
                    contentType: "application/json",
                    success: res => {
                        console.log(res)
                        $("tbody").empty();
                        if (res.data != null) {
                            totalCount = res.data.totalCount;
                            totalPage = res.data.pageCount;
                            $.each(res.data.list, function (index, item) {
                                item.createdTime = moment(item.createdTime).format("YYYY-MM-DD HH:mm:ss")
                                $("tbody").append(`<tr>` +
                                    `<td>${item.operationId}</td>` +
                                    `<td>${item.orderNum}</td>` +
                                    `<td>${item.processNumber}</td>` +
                                    `<td>${item.processName}</td>` +
                                    `<td>${item.workCenterName}</td>` +
                                    `<td>${item.leadTime}</td>` +
                                    `<td>${item.labourPrice}</td>` +
                                    `<td>${item.lostButton}</td>` +
                                    `<td>${item.createdTime}</td>` +
                                    `<td>${item.createdOwner}</td>` +
                                    `<td>${item.operationStatus == 1 ? "有效" : "无效"}</td>` +
                                    `<td>操作</td>` +
                                    `</tr>`)
                            });
                        }
                        laypage.render({
                            elem: 'demo-laypage-all',
                            curr: data.pageIndex,//当前页
                            limit: data.pageSize,//每页显示条数
                            limits: [3, 6, 9, 12],//每页条数的选择项
                            count: totalCount, // 数据总数，从后端得到
                            first: "首页",
                            prev: "上一页",
                            next: "下一页",
                            last: "尾页",
                            layout: ['count', 'first', 'prev', 'page', 'next', 'last', 'limit', 'skip'], // 自定义布局
                            jump: function (obj, first) {
                                console.log("分页", obj);
                                // 首次不执行
                                if (!first) {
                                    pageIndex = obj.curr;
                                    pageSize = obj.limit;
                                    SearchProcessLineOperation(pageIndex, pageSize);
                                }
                            }
                        });
                    }
                });
            }
        });
    </script>
</body>
</html>
